<template>
  <div>
    <div class="header-btn">
      <div>创建分群基础信息与分群规则</div>
      <div>
        <el-button type="primary" @click="sure">确认</el-button>
        <el-button plain type="info" @click="goBack">返回</el-button>
      </div>
    </div>
    <div class="wrap g-card" style="margin-bottom: 20px">
      <div class="title-header">基础信息</div>
      <el-row>
        <el-col :lg="18" :md="20" :sm="22" :xl="16" :xs="24">
          <el-form label-position="right" label-width="120px" :rules="rules" :model="form" ref="form">
            <el-form-item label="分群名称" prop="groupName">
              <el-input v-model="form.groupName" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="分群说明">
              <el-input
                v-model="groupRemark"
                placeholder="请输入"
                type="textarea"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <div class="wrap g-card" style="margin-bottom: 20px">
      <div class="title-header">分群规则</div>
      <div class="container">
        <el-row>
          <el-col :lg="18" :md="20" :sm="22" :xl="16" :xs="24">
            <div class="con-list">
              <div class="relation">
                <span class="and" @click="relationTap">{{
                    levels.relation && levels.relation != 'false' ? '且' : '或'
                  }}</span>
              </div>
              <div class="tag-con">
                <div class="tag-item">
                  <p class="tag-item-header">
                    客户属性满足<span class="add" @click="addAttribute"
                  ><i class="el-icon-circle-plus"></i>&nbsp;添加</span
                  >
                  </p>
                  <div
                    v-if="levels.attributes.children.length"
                    class="tag-first"
                  >
                    <div
                      v-if="levels.attributes.children.length > 1"
                      class="relation"
                    >
                      <span
                        class="and"
                        @click="tagFirstRelationTap(levels.attributes.relation)"
                      >{{
                          levels.attributes.relation &&
                          levels.attributes.relation != 'false'
                            ? '且'
                            : '或'
                        }}</span
                      >
                    </div>
                    <div class="tag-first-con">
                      <div
                        v-for="(item, index) in levels.attributes.children"
                        :key="index"
                        class="tag-second"
                      >
                        <div v-if="item.children.length > 1" class="relation">
                          <span
                            class="and"
                            @click="tagSecondRelationTap(index, item.relation)"
                          >{{
                              item.relation && item.relation != 'false'
                                ? '且'
                                : '或'
                            }}</span
                          >
                        </div>
                        <div class="tags">
                          <div
                            v-for="(itm, idx) in item.children"
                            :key="idx"
                            class="item"
                          >
                            <div>
                              <el-select
                                v-model="itm.value"
                                style="width: 150px"
                                @change="attributesValueChange(itm.value , index , idx)"
                              >
                                <el-option
                                  v-for="item in attributesOptions"
                                  :key="item.attributeName"
                                  :label="item.attributeShowName"
                                  :value="item.attributeName"
                                >
                                </el-option>
                              </el-select>
                              <el-select
                                v-model="itm.flag"
                                style="width: 100px"
                                :clearable="true"
                              >
                                <el-option
                                  v-for="item in attributesSuboptions[itm.value]"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                />
                              </el-select>
                              <el-input
                                v-show="attrShowStart[itm.value] && noshowValueSelected.indexOf(itm.flag) == -1"
                                v-model="itm.cont"
                                style="width: 150px"
                              ></el-input>
                              <el-select
                                v-show="!attrShowStart[itm.value] && noshowValueSelected.indexOf(itm.flag) == -1"
                                v-model="itm.cont"
                                :clearable="true"
                                style="width: 150px"
                              >
                                <el-option
                                  v-for="item in attributesChildrenOptions[itm.value]"
                                  :key="item"
                                  :label="item"
                                  :value="item"
                                />
                              </el-select>
                            </div>
                            <div class="opt">
                              <span
                                v-if="item.children.length - 1 === idx"
                                class="add"
                                @click="addSecondAttribute(index, idx)"
                              ><i class="el-icon-circle-plus-outline"></i
                              >&nbsp;新增</span
                              >
                              &nbsp;&nbsp;&nbsp;&nbsp;
                              <span
                                class="del"
                                @click="delAttribute(index, idx)"
                              ><i class="el-icon-close"></i
                              ></span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tag-item">
                  <p class="tag-item-header">
                    客户行为满足<span class="add" @click="addBehavior"
                  ><i class="el-icon-circle-plus"></i>&nbsp;添加</span
                  >
                  </p>
                  <div
                    v-if="levels.cusBehaviors.children.length"
                    class="tag-first"
                  >
                    <div
                      v-if="levels.cusBehaviors.children.length > 1"
                      class="relation"
                    >
                      <span
                        class="and"
                        @click="
                          tagFirstRelationBehaviorTap(
                            levels.cusBehaviors.relation
                          )
                        "
                      >{{
                          levels.cusBehaviors.relation &&
                          levels.cusBehaviors.relation != 'false'
                            ? '且'
                            : '或'
                        }}</span
                      >
                    </div>
                    <div class="tag-first-con">
                      <div
                        v-for="(item, index) in levels.cusBehaviors.children"
                        :key="index"
                        class="tag-second"
                      >
                        <div v-if="item.children.length > 1" class="relation">
                          <span
                            class="and"
                            @click="
                              tagSecondRelationBehaviorTap(index, item.relation)
                            "
                          >{{
                              item.relation && item.relation != 'false'
                                ? '且'
                                : '或'
                            }}</span
                          >
                        </div>
                        <div class="tags">
                          <div
                            v-for="(itm, idx) in item.children"
                            :key="idx"
                            class="item behavior"
                          >
                            <div class="behavior-item-top">
                              <div>
                                <el-date-picker
                                  v-model="itm.timelist"
                                  :clearable="false"
                                  :editable="false"
                                  format="yyyy-MM-dd"
                                  range-separator="至"
                                  type="daterange"
                                  value-format="yyyy-MM-dd"
                                ></el-date-picker>
                                <el-select
                                  v-model="itm.make"
                                  style="width: 100px"
                                >
                                  <el-option label="做过" value="0"></el-option>
                                  <el-option
                                    label="没做过"
                                    value="1"
                                  ></el-option>
                                </el-select>
                                <el-select
                                  v-model="itm.cont"
                                  style="width: 170px"
                                >
                                  <el-option
                                    v-for="item in behaviorsOptions"
                                    :key="item.attributeShowName"
                                    :label="item.attributeShowName"
                                    :value="item.attributeShowName"
                                  >{{ item.attributeShowName }}
                                  </el-option
                                  >
                                </el-select>
                                <span
                                  class="filter-btn"
                                  @click="addThirdBehavior(index, idx)"
                                ><i class="el-icon-plus"></i>添加筛选</span
                                >
                              </div>
                              <div class="opt">
                                <span
                                  v-if="item.children.length - 1 === idx"
                                  class="add"
                                  @click="addSecondBehavior(index, idx)"
                                ><i class="el-icon-circle-plus-outline"></i
                                >&nbsp;新增</span
                                >
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <span
                                  class="del"
                                  @click="delBehavior(index, idx)"
                                ><i class="el-icon-close"></i
                                ></span>
                              </div>
                            </div>
                            <div
                              v-if="itm.children.length"
                              class="behavior-item-center"
                            >
                              <div class="behavior-item-center-left">
                                <span>且满足</span>
                              </div>
                              <div
                                v-if="itm.children.length > 1"
                                class="behavior-item-center-center"
                              >
                                <span class="line top"></span>
                                <span
                                  class="and"
                                  @click="
                                    tagThirdRelationBehaviorTap(
                                      index,
                                      idx,
                                      itm.relation
                                    )
                                  "
                                >{{
                                    itm.relation && itm.relation != 'false'
                                      ? '且'
                                      : '或'
                                  }}</span
                                >
                                <span class="line bottom"></span>
                              </div>
                              <div class="behavior-item-center-right">
                                <div
                                  v-for="(m, i) in itm.children"
                                  :key="i"
                                  class="behavior-item-center-right-con"
                                >
                                  <el-select
                                    v-model="m.cont"
                                    style="width: 170px"
                                  >
                                    <el-option
                                      v-for="item in behaviorsOptions"
                                      :key="item.attributeShowName"
                                      :label="item.attributeShowName"
                                      :value="item.attributeShowName"
                                    ></el-option>
                                  </el-select>
                                  <el-select
                                    v-model="m.flag"
                                    style="width: 100px"
                                  >
                                    <el-option
                                      label="做过"
                                      value="0"
                                    ></el-option>
                                    <el-option
                                      label="没做过"
                                      value="1"
                                    ></el-option>
                                  </el-select>
                                  <el-input
                                    v-model="m.value"
                                    placeholder="次数"
                                    style="width: 100px"
                                  ></el-input>
                                  <span
                                    class="del"
                                    @click="delThirdBehavior(index, idx, i)"
                                  ><i class="el-icon-close"></i
                                  ></span>
                                </div>
                              </div>
                            </div>
                            <div class="behavior-item-bottom">
                              <el-cascader
                                v-model="itm.times"
                                :options="behaviorsSubOptions[itm.cont]"
                                style="width:170px"
                              ></el-cascader>
                              <el-select
                                v-model="itm.flag"
                                style="width: 100px ; margin-left: 12px"
                              >
                                <el-option
                                  v-for="item in sortList"
                                  :key="item.value"
                                  :label="item.value"
                                  :value="item.value"
                                ></el-option>
                              </el-select>
                              <el-input
                                v-if="(itm.flag !== '区间' && itm.flag !== 'TOPN')"
                                v-model="itm.value"
                                placeholder="次数"
                                style="width: 100px ;"
                              ></el-input>
                              <span
                                v-if="(itm.flag !== '区间' && itm.flag !== 'TOPN')"
                              >&nbsp;次</span>
                              <el-input
                                v-if="(itm.flag === '区间')"
                                v-model="itm.value"
                                placeholder="次数"
                                style="width: 100px ;"
                              ></el-input>
                              <span v-if="(itm.flag === '区间')"
                              >&nbsp;至</span>
                              <el-input
                                v-if="(itm.flag === '区间')"
                                v-model="itm.valuenext"
                                placeholder="次数"
                                style="width: 100px ;"
                              ></el-input>
                              <span v-if="(itm.flag === '区间')"
                              >&nbsp;次</span>
                              <el-select
                                v-if="(itm.flag === 'TOPN')"
                                v-model="itm.topflag"
                                style="width: 100px ; margin-left: 12px"
                              >
                                <el-option
                                  v-for="item in topFlagList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                ></el-option>
                              </el-select>
                              <el-input
                                v-if="(itm.flag === 'TOPN')"
                                v-model="itm.value"
                                placeholder=""
                                style="width: 100px ;"
                              ></el-input>
                              <span
                                v-if="(itm.flag === 'TOPN' && itm.topflag !== '3')"
                              >&nbsp;名</span>
                              <span
                                v-if="(itm.flag === 'TOPN' && itm.topflag === '3')"
                              >&nbsp;至</span>
                              <el-input
                                v-if="(itm.flag === 'TOPN' && itm.topflag === '3')"
                                v-model="itm.valuenext"
                                placeholder=""
                                style="width: 100px ;"
                              ></el-input>
                              <span
                                v-if="(itm.flag === 'TOPN' && itm.topflag === '3')"
                              >&nbsp;名</span>

                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tag-item">
                  <p class="tag-item-header">
                    客户行为序列<span class="add" @click="addSequence"
                  ><i class="el-icon-circle-plus"></i>&nbsp;添加</span
                  >
                  </p>
                  <div
                    v-if="levels.cusBehaviorSeqs.children.length"
                    class="tag-first"
                  >
                    <div
                      v-if="levels.cusBehaviorSeqs.children.length > 1"
                      class="relation"
                    >
                                                      <span
                                                        class="and"
                                                        @click="
                                                          tagFirstRelationSequenceTap(
                                                            levels.cusBehaviorSeqs.relation
                                                          )
                                                        "
                                                      >{{
                                                          levels.cusBehaviorSeqs.relation &&
                                                          levels.cusBehaviorSeqs.relation != 'false'
                                                            ? '且'
                                                            : '或'
                                                        }}</span
                                                      >
                    </div>
                    <div class="tag-first-con">
                      <div
                        v-for="(item, index) in levels.cusBehaviorSeqs.children"
                        :key="index"
                        class="tag-second"
                      >
                        <div class="tags">
                          <div class="item sequence">
                            <div class="sequence-top">
                              <div class="sequence-main">
                                                                <span class="letter">{{
                                                                    alphabet[index]
                                                                  }}</span>
                                <el-date-picker
                                  v-model="item.timelist"
                                  :clearable="false"
                                  :editable="false"
                                  format="yyyy-MM-dd"
                                  range-separator="至"
                                  type="daterange"
                                  value-format="yyyy-MM-dd"
                                ></el-date-picker
                                >&nbsp;
                                <span style="font-size: 12px; color: #999"
                                >依次做过</span
                                >
                              </div>
                              <div class="opt">
                                                                <span
                                                                  class="add"
                                                                  @click="addSecondSequence(index)"
                                                                ><i class="el-icon-circle-plus-outline"></i
                                                                >&nbsp;添加事件</span
                                                                >
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <span class="del" @click="delSequence(index)"
                                ><i class="el-icon-close"></i
                                ></span>
                              </div>
                            </div>
                            <div
                              v-for="(itm, idx) in item.children"
                              :key="idx"
                              class="item behavior"
                            >
                              <div class="behavior-item-top sequence">
                                <div style="flex-grow: 1">
                                  <div class="letter">
                                    {{ alphabet[index] + (idx + 1) }}
                                  </div>
                                  <el-select
                                    v-model="itm.cusBehavior"
                                    style="width: 170px"
                                  >
                                    <el-option
                                      v-for="item in behaviorsOptions"
                                      :key="item.attributeShowName"
                                      :label="item.attributeShowName"
                                      :value="item.attributeShowName"
                                    ></el-option>
                                  </el-select>
                                </div>
                                <span
                                  v-if="idx > 1"
                                  class="del"
                                  @click="delSecondSequence(index, idx)"
                                ><i class="el-icon-close"></i
                                ></span>
                              </div>
                              <div
                                v-if="itm.children.length"
                                class="behavior-item-center"
                              >
                                <div class="behavior-item-center-left">
                                  <span>且满足</span>
                                </div>
                                <div
                                  v-if="itm.children.length > 1"
                                  class="behavior-item-center-center"
                                >
                                  <span class="line top"></span>
                                  <span
                                    class="and"
                                    @click="tagSecondSequenceRelationTap(index,idx,itm.relation)"
                                  >{{
                                      itm.relation && itm.relation != 'false'
                                        ? '且'
                                        : '或'
                                    }}</span
                                  >
                                  <span class="line bottom"></span>
                                </div>
                                <div class="behavior-item-center-right">
                                  <div
                                    v-for="(m, i) in itm.children"
                                    :key="i"
                                    class="behavior-item-center-right-con"
                                  >
                                    <el-select
                                      v-model="m.cont"
                                      style="width: 170px"
                                    >
                                      <el-option
                                        v-for="item in behaviorsOptions"
                                        :key="item.attributeShowName"
                                        :label="item.attributeShowName"
                                        :value="item.attributeShowName"
                                      ></el-option>
                                    </el-select>
                                    <el-select
                                      v-model="m.flag"
                                      style="width: 100px"
                                    >
                                      <el-option
                                        label="做过"
                                        value="0"
                                      ></el-option>
                                      <el-option
                                        label="没做过"
                                        value="1"
                                      ></el-option>
                                    </el-select>
                                    <el-input
                                      v-model="m.value"
                                      placeholder="次数"
                                      style="width: 100px"
                                    ></el-input>
                                    <span
                                      class="del"
                                      @click="delThirdSequence(index, idx, i)"
                                    ><i class="el-icon-close"></i
                                    ></span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="operation">
        <div class="ope-header">
          <span>更新方式</span>
          <el-radio-group v-model="updateType" style="padding-left: 10px">
            <el-radio label="1"><span>例行</span></el-radio>
            <el-radio label="2"><span>手动</span></el-radio>
          </el-radio-group>
        </div>
        <div v-if="updateType == '1'" class="ope-con">
          <span>按</span>
          <el-select
            v-model="updateByTime"
            style="width: 100px"
            @change="autoUpdateChange"
          >
            <el-option
              v-for="item in autoUpdateList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span>计算</span>
          <span class="autoUpdateinfo">{{ autoUpdateInfo }}</span>
        </div>
        <div v-if="updateType == '2'" class="ope-inf">
          <span>分群生成后，点击"更新"进行数据的更新</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { addCustomerSegInfo, queryBasicTagInfo, queryCustomerSegInfo, queryTagInfo , getProvinceList , getCityList , getRiskList } from '@/api/swarm/index.js'

export default {
  data() {
    return {
      v: [],
      alphabet: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ],
      behavior: [],
      levels: {
        relation: true,
        attributes: {
          relation: true,
          children: []
        },
        cusBehaviors: {
          relation: true,
          children: []
        },
        cusBehaviorSeqs: {
          relation: true,
          children: []
        }
      },
      attributesOptions: [],
      attributesSuboptions: {},
      attributesChildrenOptions: {},
      behaviorsOptions: [],
      behaviorsSubOptions: [],
      updateType: '1',
      autoUpdateList: [
        { value: 'day', label: '天' },
        { value: 'week', label: '周' },
        { value: 'month', label: '月' }
      ],
      updateByTime: 'day',
      autoUpdateInfo: '分群每日凌晨更新',
      form:{
        groupName: '',
      },
      rules: {
        groupName: [
          {
            required:true,
            message:'群发名称不能为空',
            trigger:'blur',
          }
        ]
      },
      groupRemark: '',
      sortList: [
        { flag: '大于等于', value: '≥' },
        { flag: '大于', value: '>' },
        { flag: '小于等于', value: '≤' },
        { flag: '小于', value: '<' },
        { flag: '不等于', value: '≠' },
        { flag: '等于', value: '=' },
        { flag: '区间', value: '区间' },
        { flag: 'TOPN', value: 'TOPN' }
      ],
      //满足值不展示输入框的值
      noshowValueSelected: ['5', '6', '7', '8'],
      topFlagList: [
        { value: '1', label: '前' },
        { value: '2', label: '后' },
        { value: '3', label: '区间' }
      ],
      //客户属性满足控制后续输入框和下拉框展示
      attrShowStart: {},
      attrShowInput: {},
      attrShowSelect: {},

      attrSpelist:['province','city','preference_insured_products','browse_product_preferences'],
      provinceList:[],
      cityList:[],
      riskList:[],
    }
  },
  created() {
    this.getPCRList();
    this.$nextTick(() => {
      this.queryTagInfo();
    })
    if (this.$route.query.infoId) {
      console.log('跳转的时候携带的参数id', this.$route.query.infoId)
      queryCustomerSegInfo({ infoId: this.$route.query.infoId }).then((res) => {
        this.form.groupName = res.data.groupName
        this.groupRemark = res.data.groupRemark
        this.updateByTime = res.data.updateByTime
        this.updateType = res.data.updateType
        this.levels.relation = res.data.relation
        this.levels.attributes = res.data.attributes
        this.levels.cusBehaviors = res.data.cusBehaviors
        this.levels.cusBehaviorSeqs = res.data.cusBehaviorSeqs
      })
    }
  },
  methods: {
    goBack() {
      this.$router.back()
    },
    sure() {
      console.log(this.levels)
      let params = {
        groupName: this.form.groupName,
        groupRemark: this.groupRemark,
        updateByTime: this.updateByTime,
        updateType: this.updateType,
        ...this.levels
      }
      this.$refs['form'].validate(valid => {
        if(valid){
          if (this.$route.query.infoId) {
            params.infoId = this.$route.query.infoId
            addCustomerSegInfo(params).then((res) => {
              if (res.code == 200) {
                this.$router.back()
              }
            })
          } else {
            addCustomerSegInfo(params).then((res) => {
              if (res.code == 200) {
                this.$router.back()
              }
            })
          }
        }else{
          this.msgError("您还未录入完成，请核对后提交！");
        }
      })

    },
    queryTagInfo() {
      queryBasicTagInfo({ code: 1 }).then((res) => {
        if(res.code == 200){
          this.attributesOptions = res.data.attributeInfoList
          this.attributesOptions.forEach((item) => {
            if (item.tagFlagList) {
              this.attributesSuboptions[item.attributeName] = item.tagFlagList[0].tagInfolist || []
              if(this.attrSpelist.indexOf(item.attributeName == -1)){
                this.attributesChildrenOptions[item.attributeName] = item.tagFlagList[0].enums || [];
              }else if(item.attributeName == 'province'){
                let newArr=this.provinceList.map(item=>{
                  return item.label;
                })
                this.attributesChildrenOptions[item.attributeName] = newArr || [];
              }else if(item.attributeName == 'city'){
                let newArr=this.cityList.map(item=>{
                  return item.label;
                })
                this.attributesChildrenOptions[item.attributeName] = newArr || [];
              }else if(item.attributeName == 'preference_insured_products' || item.attributeName == 'browse_product_preferences'){
                let newArr=this.riskList.map(item=>{
                  return item.label;
                })
                this.attributesChildrenOptions[item.attributeName] = newArr || [];
              }
              if(this.attributesChildrenOptions[item.attributeName].length == 0){
                this.attrShowStart[item.attributeName] = true;
              }else if(this.attributesChildrenOptions[item.attributeName].length > 0){
                this.attrShowStart[item.attributeName] = false;
              }
            }
          })
        }
      }).catch(() => {})
      queryTagInfo({ code: 2 }).then((res) => {
        if(res.code == 200){
          this.behaviorsOptions = res.data.attributeInfoList
          this.behaviorsOptions.forEach((item) => {
            this.behaviorsSubOptions[item.attributeShowName] =
              item.tagFlagList || []
          })
        }
        console.log(this.behaviorsSubOptions)
      }).catch(() => {})
    },
    addAttribute() {
      this.levels.attributes.children.push({
        relation: true,
        children: [
          {
            value: ''
          }
        ]
      })
    },
    addBehavior() {
      this.levels.cusBehaviors.children.push({
        relation: true,
        children: [
          {
            value: '',
            timelist: [],
            make: '',
            cont: '',
            times: '',
            flag: '',
            relation: true,
            children: []
          }
        ]
      })
    },
    addSequence() {
      this.levels.cusBehaviorSeqs.children.push({
        timelist: '',
        value: 1,
        children: [
          {
            value: '',
            cusBehavior: '',
            flag: '',
            relation: true,
            children: []
          },
          {
            value: '',
            cusBehavior: '',
            flag: '',
            relation: true,
            children: []
          }
        ]
      })
    },
    relationTap() {
      this.levels.relation = !this.levels.relation
      this.levelsRelation = !this.levelsRelation
    },
    tagFirstRelationTap(relation) {
      this.levels.attributes.relation = !relation
    },
    tagFirstRelationBehaviorTap(relation) {
      this.levels.cusBehaviors.relation = !relation
    },
    tagSecondRelationTap(index, relation) {
      this.levels.attributes.children[index].relation = !relation
    },
    tagSecondRelationBehaviorTap(index, relation) {
      this.levels.cusBehaviors.children[index].relation = !relation
    },
    tagThirdRelationBehaviorTap(index, idx, relation) {
      this.levels.cusBehaviors.children[index].children[idx].relation =
        !relation
    },
    addSecondAttribute(index, idx) {
      this.levels.attributes.children[index].children.push({
        value: ''
      })
    },
    addSecondBehavior(index, idx) {
      this.levels.cusBehaviors.children[index].children.push({
        value: '',
        relation: true,
        children: []
      })
    },
    addThirdBehavior(index, idx) {
      this.levels.cusBehaviors.children[index].children[idx].children.push({
        cont: '',
        flag: '',
        value: ''
      })
    },
    delAttribute(index, idx) {
      if (this.levels.attributes.children[index].children.length === 1) {
        this.levels.attributes.children.splice(index, 1)
      } else {
        this.levels.attributes.children[index].children.splice(idx, 1)
      }
    },
    delBehavior(index, idx) {
      if (this.levels.cusBehaviors.children[index].children.length === 1) {
        this.levels.cusBehaviors.children.splice(index, 1)
      } else {
        this.levels.cusBehaviors.children[index].children.splice(idx, 1)
      }
    },
    delThirdBehavior(index, idx, i) {
      this.levels.cusBehaviors.children[index].children[idx].children.splice(
        i,
        1
      )
    },
    autoUpdateChange(value) {
      if (value == 'day') {
        this.autoUpdateInfo = '分群每日凌晨更新'
      } else if (value == 'week') {
        this.autoUpdateInfo = '分群每周一凌晨更新'
      } else if (value == 'month') {
        this.autoUpdateInfo = '分群每月一号凌晨更新'
      }
    },
    tagFirstRelationSequenceTap(relation) {
      this.levels.cusBehaviorSeqs.relation = !relation
    },
    addSecondSequence(index) {
      this.levels.cusBehaviorSeqs.children[index].children.push({
        value: '',
        relation: true,
        children: []
      })
    },
    delSequence(index) {
      this.levels.cusBehaviorSeqs.children.splice(index, 1)
    },
    addThirdSequence(index, idx) {
      this.levels.cusBehaviorSeqs.children[index].children[idx].children.push({
        value: '',
        cont: '',
        flag: ''
      })
    },
    delSecondSequence(index, idx) {
      this.levels.cusBehaviorSeqs.children[index].children.splice(idx, 1)
    },
    tagSecondSequenceRelationTap(index, idx, relation) {
      this.levels.cusBehaviorSeqs.children[index].children[idx].relation =
        !relation
    },
    delThirdSequence(index, idx, i) {
      this.levels.cusBehaviorSeqs.children[index].children[idx].children.splice(
        i,
        1
      )
    },
    //客户属性满足根据值判断展示输入/选择框 并清空值
    attributesValueChange(val, index, idx) {
    //   值做清空有问题，先放一下
      // this.levels.attributes.children[index].children[idx].flag = '';
      // this.levels.attributes.children[index].children[idx].cont = '';
      // console.log(this.levels.attributes.children[index].children[idx], '@@@@@@@@@')
      // if (this.attributesChildrenOptions[val] && this.attributesChildrenOptions[val].length == 0) {
      //   this.attrShowInput[val] = true
      //   this.attrShowSelect[val] = false
      // } else if (this.attributesChildrenOptions[val] && this.attributesChildrenOptions[val].length > 0) {
      //   this.attrShowInput[val] = false
      //   this.attrShowSelect[val] = true
      // }
      // this.attrShowStart[index] = (!this.attrShowInput && !this.attrShowSelect) ? true : false
    },

    //获取省份、城市、险种枚举值
    getPCRList(){
      getProvinceList().then((res) => { if(res.code == 200) this.provinceList = res.data.list}).catch(() => {})
      getCityList().then((res) => { if(res.code == 200) this.cityList = res.data.list}).catch(() => {})
      getRiskList().then((res) => { if(res.code == 200) this.riskList = res.data.list}).catch(() => {})
    },

  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/base.scss";

.header-btn {
  @include headerBtn;
}

.wrap {
  @include titleWrap;
}

.container {
  padding: 0px 20px;

  .con-title {
    font-size: 14px;
    line-height: 1.5;
  }

  .con-notice {
    font-size: 12px;
    line-height: 1.5;
    color: #999;
  }

  .con-level {
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px;

    .level {
      box-sizing: border-box;
      min-width: 200px;
      height: 30px;
      line-height: 30px;
      border-radius: 1000px;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
      margin: 0 10px 10px 0;

      &.item {
        border: 1px solid #ccc;

        &.actived {
          border: 1px solid #082aff;
        }
      }

      &.add {
        display: block;
        text-align: center;
        border: 1px dashed #ccc;
      }

      .el-icon-more {
        cursor: pointer;
      }

      // border: 1px solid #082aff;
    }
  }

  .level-ipt {
    margin-bottom: 10px;
  }

  .con-list {
    display: flex;
    align-items: stretch;

    .relation {
      flex-shrink: 0;
      position: relative;
      width: 26px;

      .and {
        display: block;
        box-sizing: border-box;
        font-size: 12px;
        width: 18px;
        height: 18px;
        text-align: center;
        line-height: 18px;
        color: #082aff;
        background-color: #ffbaa2;
        border-radius: 4px;
        cursor: pointer;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 7;
        user-select: none;
      }

      &::after {
        content: "";
        display: block;
        position: absolute;
        width: 3px;
        height: 100%;
        background-color: #ffbaa2;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 6;
      }
    }

    .tag-con {
      flex-grow: 1;

      .tag-item {
        border: 1px solid #ccc;
        padding: 10px;
        border-radius: 5px;

        .tag-item-header {
          color: #333;

          .add {
            float: right;
            color: #666;
            cursor: pointer;

            .el-icon-circle-plus {
              color: #082aff;
            }
          }
        }

        &:not(:last-child) {
          margin-bottom: 10px;
        }

        .tag-first {
          display: flex;
          align-items: stretch;
          margin-top: 10px;

          .tag-first-con {
            flex-grow: 1;

            .tag-second {
              display: flex;
              align-items: stretch;
              width: 100%;

              &:not(:last-child) {
                margin-bottom: 20px;
              }

              .tags {
                flex-grow: 1;

                .item {
                  width: 100%;
                  display: flex;
                  justify-content: space-between;

                  .letter {
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    text-align: center;
                    line-height: 20px;
                    background-color: #ffbaa2;
                    color: #082aff;
                    margin-right: 5px;
                    border-radius: 3px;
                  }

                  &.behavior {
                    display: block;

                    .behavior-item-top {
                      width: 100%;
                      display: flex;
                      justify-content: space-between;

                      &.sequence {
                        justify-content: left;
                        align-items: center;

                        .letter {
                          display: inline-block;
                          width: 20px;
                          height: 20px;
                          text-align: center;
                          line-height: 18px;
                          box-sizing: border-box;
                          font-size: 12px;
                          border: 1px solid #eee;
                          background-color: #f2f2f2;
                          color: #999;
                          border-radius: 3px;
                        }

                        .del {
                          cursor: pointer;
                          color: #999;

                          &:hover {
                            color: #082aff;
                          }
                        }
                      }
                    }

                    .behavior-item-center {
                      display: flex;
                      align-items: stretch;
                      margin-top: 10px;
                      justify-items: center;

                      .behavior-item-center-left {
                        width: 70px;
                        font-size: 12px;
                        color: #082aff;
                        border-right: 2px solid #ffbaa2;
                        text-align: center;
                        line-height: 30px;
                      }

                      .behavior-item-center-center {
                        display: flex;
                        flex-direction: column;
                        width: 40px;
                        align-items: center;
                        justify-content: center;
                        padding: 14px 0;

                        .and {
                          display: block;
                          flex-shrink: 0;
                          width: 22px;
                          height: 22px;
                          color: #999;
                          border: 1px solid #eee;
                          border-radius: 3px;
                          text-align: center;
                          line-height: 20px;
                          font-size: 12px;
                          cursor: pointer;
                          user-select: none;

                          &:hover {
                            color: #ffbaa2;
                            border: 1px solid #ffbaa2;
                          }
                        }

                        .line {
                          display: block;
                          flex-grow: 0.5;
                          // background-color: red;
                          width: 50%;
                          transform: translateX(50%);
                          border-left: 1px solid #ffbaa2;

                          &.top {
                            border-top: 1px solid #ffbaa2;
                            border-top-left-radius: 2px;
                          }

                          &.bottom {
                            border-bottom: 1px solid #ffbaa2;
                            border-bottom-left-radius: 2px;
                          }
                        }
                      }

                      .behavior-item-center-right {
                        .behavior-item-center-right-con {
                          .del {
                            margin-left: 5px;
                            color: #999;
                            cursor: pointer;

                            &:hover {
                              color: #082aff;
                            }
                          }

                          &:not(:last-child) {
                            margin-bottom: 5px;
                          }
                        }
                      }
                    }

                    .behavior-item-bottom {
                      margin-top: 10px;
                    }
                  }

                  &.sequence {
                    flex-wrap: wrap;

                    .sequence-top {
                      width: 100%;
                      display: flex;
                      margin-bottom: 10px;

                      .sequence-main {
                        flex-grow: 1;
                      }
                    }
                  }

                  .el-select {
                    margin-right: 10px;
                  }

                  .filter-btn {
                    font-size: 12px;
                    color: #999;
                    cursor: pointer;

                    &:hover {
                      color: #082aff;
                    }
                  }

                  .opt {
                    display: inline-block;
                    color: #999;
                    line-height: 32px;
                    flex-shrink: 0;

                    .add {
                      cursor: pointer;

                      .el-icon-circle-plus-outline {
                        color: #082aff;
                      }
                    }

                    .del {
                      cursor: pointer;

                      &:hover {
                        color: #082aff;
                      }
                    }
                  }

                  &:not(:last-child) {
                    margin-bottom: 10px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  ::v-deep {
    .el-date-editor {
      width: 186px;
      padding: 3px 0 3px 6px;
      margin-right: 10px;

      .el-icon-date {
        width: 20px;
        flex-shrink: 0;
      }

      .el-range-input {
        flex-shrink: 0;
      }

      .el-range-separator {
        width: 16px;
        text-align: center;
        font-size: 12px;
        padding: 0;
        flex-shrink: 0;
      }

      .el-range__close-icon {
        display: none;
      }
    }
  }
}

.operation {
  padding: 20px 0 0 50px;

  .ope-header {
    padding: 0 0 10px;
    font-weight: 600;
  }

  .ope-con {
    .autoUpdateinfo {
      font-size: 12px;
      color: #ccc;
    }
  }

  .ope-inf {
    font-size: 12px;
    color: #ccc;
  }
}
</style>
